<template>
  <div id="app">
    <el-container>
      <el-header class="header" :style="headStyle">
        <Head style="height:100%;"></Head>
      </el-header>
      <el-main>
        <Main></Main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Head from "@/components/Head.vue";
import Main from "@/components/Main.vue";
export default {
  components: {
    Head,
    Main,
  },
  computed: {
    headStyle() {
      return this.$store.state.theme.activeStyle.head;
    },
  },
};
</script>

<style>
.header {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(207, 203, 203);

  height:100%;
}

body {
  margin: 0px;
}

#app .el-main {
  padding: 0;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}

.dataframe th,
.dataframe td {
  word-break: keep-all;
  white-space: nowrap;
  padding: 5px 5px 5px 5px;

  border: 0px;
}

.dataframe {
  border: 0px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-spacing: 0px;
}

.dataframe tr {
  height: 50px;
}

.dataframe td {
  border-bottom: 1px solid black;
}
</style>
